<template>
  <div class="ConcentratorStatistics">
    <!-- 集中器统计 -->
    <div id="ConcentratorStatistics" class="concentratorStatistics-main"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { selectNum } from '@/api/collectingDevices/flConcentratorManager/index'
export default {
  name: 'ConcentratorStatistics',
  data() {
    return {
      echarts: '',
      waterData: [],
    }
  },
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let ConcentratorStatistics = document.getElementById(
        'ConcentratorStatistics'
      )
      ConcentratorStatistics.style.height = height - 40 + 'px'
      ConcentratorStatistics.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(ConcentratorStatistics)
      this.echarts.resize()
      // this.createEcharts()
      //this.AlwaysCopyData()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(
        document.getElementById('ConcentratorStatistics')
      )
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: '10%',
          itemWidth: 25,
          data: [
            { name: '在线 ' + 0 },
            { name: '离线 ' + 0 },
            { name: '读取失败 ' + 0 },
          ],
        },
        /* graphic: [
          {
            type: 'group',
            left: '10',
            top: 30,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  fill: '#333',
                  text: ['总数:0', '在线:0', '离线:0', '读取失败:0'].join('\n'),
                  font: '20px Microsoft YaHei',
                },
              },
            ],
          },
        ], */
        series: [
          {
            name: '集中器统计',
            type: 'pie',
            radius: '80%',
            data: [],
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
    // 获取集中器统计数
    async AlwaysCopyData(call) {
      const res = await selectNum()
      console.log(res.data, 'qingqiu ')
      const values = res.data
      let resData = []
      // resData[0] = {value: values[0], name: '总数 '+values[0]};
      resData[0] = { value: values.on, name: '在线 ' + values.on }
      resData[1] = { value: values.off, name: '离线 ' + values.off }
      resData[2] = { value: values.fail, name: '读取失败 ' + values.fail }
      console.log(resData, '参数对么')

      this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '60%',
          top: 'center',
          data: [
            { name: '在线 ' + values.on },
            { name: '离线 ' + values.off },
            { name: '读取失败 ' + values.fail },
          ],
        },
        /* graphic: [
          {
            type: 'group',
            left: '10',
            top: 30,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  fill: '#333',
                  text: [
                    '总数:' + values.sum,
                    '在线:' + values.on,
                    '离线:' + values.off,
                    '读取失败:' + values.fail,
                  ].join('\n'),
                  font: '20px Microsoft YaHei',
                },
              },
            ],
          },
        ], */
        color: ['green', 'orange', 'red', 'blue', 'indigo', 'purple'],
        series: [
          {
            name: '集中器统计',
            type: 'pie',
            radius: '70%',
            center: ['30%', '50%'],
            data: resData,
            itemStyle: {
              normal: {
                label: {
                  show: false, //隐藏标示文字
                },
                labelLine: {
                  show: false, //隐藏标示线
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })

      call && call()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  mounted() {
    this.createEcharts()
    this.AlwaysCopyData(() => {
      let width = document.querySelector('.ConcentratorStatistics').parentNode
        .parentNode.parentNode.style.width
      let height = document.querySelector('.ConcentratorStatistics').parentNode
        .parentNode.parentNode.clientHeight
      console.info('width--', width.split('p')[0])
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
}
</script>

<style>
.concentratorStatistics-main {
  width: 320px;
  height: 220px;
}
</style>
